<template>
  <div class="rightBottom22">
    <div class="headerMaintitle">
      <img class="topPic" src="../assets/rightBottom3.png" alt="" />
      <div class="headerText">标题1</div>
    </div>
    <a-select
      :getPopupContainer="(triggerNode) => triggerNode.parentNode"
      v-model="active"
      class="rightTopSelect"
      @select="select"
    >
      <a-select-option
        v-for="item in selectList"
        :key="item.value"
        :value="item.value"
        >{{ item.name }}</a-select-option
      >
    </a-select>
    <div class="chart">
      <img src="../assets/noVideo.svg" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  name: "RightTop2",
  props: {},
  components: {},
  data() {
    return {
      active: "",
      selectList: [
        { name: "站房1", value: 1 },
        { name: "站房2", value: 2 },
        { name: "站房3", value: 3 },
        { name: "站房4", value: 4 },
        { name: "站房5", value: 5 },
        { name: "站房6", value: 6 },
        { name: "站房7", value: 7 },
        { name: "站房8", value: 8 },
        { name: "站房9", value: 9 },
        { name: "站房10", value: 10 },
        { name: "站房11", value: 11 },
        { name: "站房12", value: 12 },
        { name: "站房13", value: 13 },
        { name: "站房14", value: 14 },
        { name: "站房15", value: 15 },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    select() {},
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.rightBottom22 {
  position: relative;

  .chart {
    margin: 10px 0 0px;
    width: 100%;
    height: 420px;
    background-image: url("../assets/noVidoBg.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
<style lang="less">
.rightTopSelect {
  width: 160px;
  height: 38px;
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 20px;
}
.rightBottom22 {
  .ant-select-dropdown-content {
    border: 0 !important;
  }
  .ant-select-dropdown-menu {
    background: rgba(39, 61, 118, 1) !important;
  }
  .ant-select-dropdown-menu-item-active {
    background: linear-gradient(180deg, #4796d9 0%, #225db1 100%) !important;
  }
  .ant-select-dropdown {
    width: 160px;
    top: 37px !important;
    left: auto !important;
    right: 10px !important;

    .ant-select-dropdown-menu-item {
      border-bottom: 1px solid rgba(143, 179, 255, 0.16);
      background: #273d76;
      text-align: left;
      font-size: 18px;
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }
}
</style>
